import {bigIframeInform} from '/mixins/bigIframeInform.js'
export const bigComOp = {
    data() {
        return {
            showPersonalInfo: false,
            // 头部搜索框值
            searchValue: '',
            // 头部搜索框宽度
            searchWidth: '150px',
            // 左侧边栏展开状态
            isUnfold: false,
            // 当前选中的左侧边栏id
            sideNavActivity: 0,
            // 左侧边栏二级展开状态
            isVFPShow: false,
            //当前的tab
            activeTab: 0,
            //标签列表
            tabList: [

            ],
            //二级nav内容
            vfpList: [],
            //二级tabbar内容需要高度
            vfpNavNeedHeight: 0,
            //iframe 的蒙板
            replaceIframe: false,
            // 主题颜色
            themeColor: {
                // 头部背景颜色
                headerBgColor: '#FFFFFF',
                //nav背景颜色
                leftNavBgColor: '#2a3edb',
                //nav字体颜色
                leftNavFontColor: '#fcffe5',
                //nav item hover颜背景颜色
                leftNavHoverBgColor: '#379ad6',
                //nav item hover颜字体颜色
                leftNavHoverFontColor: '#FFFFFF',
                //nav 活跃中 item背景颜色
                leftNavActiveBgColor: '#333399',
                //nav 活跃中 item字体颜色
                leftNavActiveFontColor: '#ffd7d7',
            },
            //加载中弹框loading
            loading: {
                // 弹出状态
                loadingMask: false,
                // 0:iframe 1:0+tab 2:1+nav 3:2+header
                type: 1,
                // 当前loading持有class(根据type所得,不需要自己配置)
                class: 'loading-1',
                // 背景颜色
                bgColor: '#0000004C',
                // 文字描述
                descText: '',
            },

            // 左侧边栏数据状态
            sideNav: [],
            //头部操作栏数据 fr布局最前面的在最右边
            headerOperationList: [],
        }
    },

    methods: {
        /**
         * 切换左侧边栏展开状态
         */
        switchSideNavUnfold() {
            this.isUnfold = !this.isUnfold;
        },

        /**
         * 点击左侧边栏事件
         * @param item
         */
        selectNavItem(item) {
            // this.informToIframe()
            if (item.url) {
                let isHav = this.tabList.some((it) => {
                    return item.id === it.id;
                });
                if (!isHav) {
                    let tabItem = {
                        id: item.id,
                        url: item.url,
                        name: item.name,
                        closable: item.closable || true
                    };
                    this.tabList.push(tabItem);
                }
                this.activeTab = item.id;
            }
            this.sideNavActivity = item.id;
            if (item.children) {
                let allHeight = 0;
                item.children.forEach((item, index) => {
                    let itemGroupHeight = 38 + (item.children ? item.children.length * 26 : 0);
                    allHeight += itemGroupHeight;
                });
                this.vfpNavNeedHeight = allHeight;
                this.vfpList = item.children;
                this.isVFPShow = true;
            }

        },

        /**
         * 点击二级侧边栏事件
         * @param item
         */
        selectVFPItem(item) {
            if (item.url) {
                let isHav = this.tabList.some((it) => {
                    return item.id === it.id;
                });
                if (!isHav) {
                    let tabItem = {
                        id: item.id,
                        url: item.url,
                        name: item.name,
                        closable: item.closable || true
                    };
                    this.tabList.push(tabItem);
                }
                this.activeTab = item.id;
                this.isVFPShow = false;
            }
        },

        /**
         * 关闭左侧边栏二级
         */
        closeVFPWicket() {
            this.isVFPShow = false;
            setTimeout(() => {
            }, 1000)
        },

        /**
         * 头部搜索框获取焦点
         */
        headerSearchFocus() {
            this.searchWidth = '350px';
        },

        /**
         * 头部搜索框丢失焦点
         */
        headerSearchBlur() {
            this.searchWidth = '150px';
        },

        /**
         * 关闭tab
         * @param name tab id
         */
        removeTab(name) {
            for (let i = 0; i < this.tabList.length; i++) {
                if (this.tabList[i].id === name) {
                    this.tabList.splice(i, 1);
                    if (this.activeTab === name) {
                        this.switchTab(i);
                    }
                    return
                }
            }
        },

        /**
         * 删除页签后当前页签重渲染
         * @param i
         */
        switchTab(i) {
            if (this.tabList[i]) {
                this.activeTab = this.tabList[i].id;
            } else {
                this.activeTab = this.tabList[i - 1].id;
            }
        },

        /**
         * tabs右击后下拉出现或隐藏回调
         * @param item 当前关闭或打开的item详情
         * @param b 当前关闭还是打开
         */
        tagPopChange(index, b) {
            // if (b) {
            //     this.replaceIframe = true;
            //     this.tabList.forEach((it, i) => {
            //         if (it.id !== item.id) {
            //             let ref = 'dropdownRef_' + it.id;
            //             this.$refs[ref][0].handleClose();
            //         }
            //     })
            // }
            if (b) {
                this.replaceIframe = true;
                this.tabList.forEach((it, i) => {
                    if (i !== index) {
                        // let ref = 'dropdownRef';
                        this.$refs.dropdownRef[i].handleClose();
                    }
                })
            }
        },

        /**
         * 点击iframe蒙板
         */
        mackClick() {
            this.replaceIframe = false;
        },

        /**
         * 关闭当前tab
         * @param item 当前tab item
         * @param index 当前位于列表索引
         */
        closePresentTab(item, index) {
            this.tabList.splice(index, 1);
            if (this.activeTab === item.id) {
                this.switchTab(index);
            }
        },

        /**
         * 关闭左侧tab
         * @param item 当前tab item
         * @param index 当前位于列表索引
         */
        closeLeftTab(item, index) {
            for (let i = index - 1; i >= 0; i--) {
                if (this.tabList[i].closable) {
                    if (this.activeTab === this.tabList[i].id) {
                        this.activeTab = item.id;
                    }
                    this.tabList.splice(i, 1);
                }
            }
        },

        /**
         * 关闭右侧tab
         * @param item 当前tab item
         * @param index 当前位于列表索引
         */
        closeRightTab(item, index) {
            let tabListL = this.tabList.length - 1;
            for (let i = tabListL; i > index; i--) {
                if (this.tabList[i].closable) {
                    if (this.activeTab === this.tabList[i].id) {
                        this.activeTab = item.id;
                    }
                    this.tabList.splice(i, 1);
                }
            }
        },

        /**
         * 关闭其他tab
         * @param item 当前tab item
         * @param index 当前位于列表索引
         */
        closeOtherTab(item, index) {
            let tabListL = this.tabList.length - 1;
            for (let i = tabListL; i >= 0; i--) {
                if (this.tabList[i].closable && i !== index) {
                    if (this.activeTab === this.tabList[i].id) {
                        this.activeTab = item.id;
                    }
                    this.tabList.splice(i, 1);
                }
            }
        },

        /**
         * 关闭全部tab
         * @param item 当前tab item
         * @param index 当前位于列表索引
         */
        closeALlTab(item, index) {
            this.activeTab = this.tabList[0].id;
            let tabListL = this.tabList.length - 1;
            for (let i = tabListL; i >= 0; i--) {
                if (this.tabList[i].closable) {
                    if (this.activeTab === this.tabList[i].id) {
                        this.activeTab = item.id;
                    }
                    this.tabList.splice(i, 1);
                }
            }
        },

        /**
         * 切换loading出现状态
         * @param status 开关状态
         * @param category  类型0、1、2、3
         * @param descText  文字描述
         * @param bgColor   背景颜色
         */
        loadingMask(status, category, descText, bgColor = '#0000004C') {
            let arr = [
                'loading-0', 'loading-1', 'loading-2', 'loading-3'
            ];
            this.loading = {
                loadingMask: status,
                type: category,
                class: arr[category],
                bgColor: bgColor,
                descText: descText,
            };
        },

        /**
         * 根据url获取当前nav的tab
         * @param url
         * @returns {{closable: boolean, name, id: (string), url}|{closable: boolean, name: string, id: number, url: (string)}}
         */
        getUrlTab(url) {
            console.log(url)

            let oneNavList = this.sideNav;

            for (let i = 0; i < oneNavList.length; i++) {
                if (oneNavList[i].url === url) {
                    let tabItem = {
                        id: oneNavList[i].id,
                        url: oneNavList[i].url,
                        name: oneNavList[i].name,
                        closable: oneNavList[i].closable || true,
                    };
                    return tabItem;
                }
                let twoNavList = oneNavList[i].children;
                if (twoNavList) {
                    for (let j = 0; j < twoNavList.length; j++) {

                        if (twoNavList[j].url === url) {
                            let tabItem = {
                                id: twoNavList[j].id,
                                url: twoNavList[j].url,
                                name: twoNavList[j].name,
                                closable: twoNavList[j].closable || true,
                            };
                            return tabItem;
                        }

                        let threeNavList = twoNavList[j].children;
                        if (threeNavList) {
                            for (let k = 0; k < threeNavList.length; k++) {
                                if (threeNavList[k].url === url) {
                                    let tabItem = {
                                        id: threeNavList[k].id,
                                        url: threeNavList[k].url,
                                        name: threeNavList[k].name,
                                        closable: threeNavList[k].closable || true,
                                    };
                                    return tabItem;
                                }
                            }
                        }

                    }
                }
            }
            return false;
        },

        /**
         * 根据url解析url
         * @param url
         * @returns {{}|null}
         */
        getQueryData(url) {
            //首先获取地址
            url = url || window.location.href;
            //获取传值
            let urlArr = url.split("?");
            //判断是否有传值
            if (urlArr.length === 1) {
                return {
                    url: urlArr[0],
                    data: {}
                };
            }
            //获取get传值的个数
            let value_arr = urlArr[1].split("&");
            //循环生成返回的对象
            let data = {};
            for (let i = 0; i < value_arr.length; i++) {
                let key_val = value_arr[i].split("=");
                data[key_val[0]] = key_val[1];
            }
            return {
                url: urlArr[0],
                data: data
            };
        },

        /**
         * 页面创建时初始化tab栏
         */
        initTab() {
            let urlData = this.getQueryData();
            let queryData = urlData.data
            if (queryData && queryData.back) {
                //解码获取url
                console.log('----------------',queryData.back)
                let url =  decodeURIComponent(queryData.back);
                console.log('----------------',url)
                //判断是否有传值
                let urlArr = url.split("?");
                let domain = urlArr[0];
                //填充
                let tabItem = this.getUrlTab(domain);
                if (tabItem){
                    let isHav= this.tabList.some((item)=>{
                        return item.id === tabItem.id
                    })
                    if (!isHav){
                        tabItem.url = url;
                        this.tabList.push(tabItem);
                        this.activeTab = tabItem.id;
                    }

                }
            }
            // history.replaceState('', '', urlData.url)
        },

        /**
         * 通知子iframe消息
         * @param id iframe 独有标志
         * @param data 传递的数据
         */
        informToIframe(id, data) {
            id ??= this.activeTab;
            let index;
            for (let i = 0; i < this.tabList.length; i++) {
                if (this.tabList[i].id === id) {
                    index = i;
                }
            }
            if (index) {
                let iframeEl = this.$refs.iframeRef[index];
                iframeEl.contentWindow.postMessage(data, '*');
            } else {
                return '该iframe当前不在运行中';
            }

        },

        personalHeadMouseenter() {
            console.log('进');
        },

        personalHeadMouseleave() {
            console.log('出');
        },
    },

    computed: {
        getVFPLine() {
            let vfpNavBoxH = document.documentElement.clientHeight - 54;

            let lineNum = Math.ceil(this.vfpNavNeedHeight / vfpNavBoxH);
            return lineNum > 5 ? 5 : lineNum;
        }
    },

    directives: {
        ClickOutside: ElementPlus.ClickOutside
    },

    mounted() {
        this.initTab();
        let that=this;
        //监听子页面向父页面的传参
        window.addEventListener('message', function (event) {
            //此处执行事件
            console.log('监听子页面向父页面的传参');
            console.log(event.data)
            if (event.data && event.data.type){
                that.disposeParam(event.data)
            }

        });
    },

    mixins: [ bigIframeInform ],
}
